@extends('admin.formLayout')
@section('title','发送图文')
@section('barName','发送图文')
@section('content')
    <script src="/code/js/jquery-1.8.3.min.js"></script>
    <style>
        .step_done{
            background-color: #5FB878;
        }
    </style>
    <form class="layui-form" action="{{route('admin.wechat.send-add')}}"  method="post">

                    <div class="layui-row">
                            <div class="layui-col-md12">
                                {{csrf_field()}}
                                <input type="hidden" name="ids" value="{{$id?$id:''}}"/>
                                <ul class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis" id="step1time">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">首先...</h3>
                                            <button class="layui-btn" id="step1" type="button"><i class="layui-icon">&#xe654;</i>选择一篇文章</button>
                                            <ul id="step1container">
                                                @if($post)
                                                    <li>
                                                        <a target="_blank" href="{{route('wap.post-index',['id'=>$post->id])}}">{{$post->post_title}}</a>
                                                    </li>
                                                @endif

                                            </ul>
                                        </div>
                                    </li>
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">您还可以...</h3>
                                            <button class="layui-btn {{$id?:'layui-btn-disabled'}}" id="step2" type="button" {{$id?:'disabled'}}><i class="layui-icon">&#xe654;</i>添加更多文章(可选)</button>
                                            <ul id="step2container">
                                            </ul>
                                        </div>
                                    </li>
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">最后...</h3>
                                            <button class="layui-btn" lay-submit="" lay-filter="form">立即群发</button>
                                            <button type="button"  onclick="javascript:location.href='{{route('admin.posts')}}'" class="layui-btn layui-btn-primary">返回</button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">

                                </div>
                            </div>
                    </div>
    </form>
@endsection
@section('script')
    <script>
        var news = {'sss':1};
        var ids =[{{$id?$id:''}}];
        function  cancleNews(val) {
            for(var i=0; i<ids.length; i++) {
                if(ids[i] == val) {
                    ids.splice(i, 1)
                    $('[name=ids]').val(ids.join(','));
                    break;
                }
            }
        }
        layui.use(['element','form','layer','upload','jquery'], function(){
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            var upload = layui.upload;
            var $ = layui.jquery;
            $(document).on('click','#step1',function () {
                layer.open({
                    type: 2,
                    title: '选择文章',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['90%', '100%'],
                    resize:true,
                    content: '{{route('admin.wechat.send.newsList')}}#first', //iframe的url
                    success:function () {
                        news = {}
                    },
                    end:function () {
                        if(news&&news.id!=undefined){
                            if(ids.indexOf(news.id)>-1){
                                layer.msg('该文章已存在',{'icon':2});

                            }else{
                                ids[0] = news.id;
                                str = '';
                                str = '<li><a href="/wap/'+news.id+'/page" target="_blank">'+news.post_title+'</a></li>';
                                $('#step1container').html(str);
                                $('#step1').text('重新选择文章');
                                $('#step1time').addClass('step_done');
                                $('#step2').removeClass('layui-btn-disabled');
                                $('#step2').removeAttr('disabled');
                                $('[name=ids]').val(ids.join(','));
                            }

                        }
                    }
                });
            })
            $(document).on('click','#step2',function () {
                layer.open({
                    type: 2,
                    title: '选择文章',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['90%', '100%'],
                    resize:true,
                    content: '{{route('admin.wechat.send.newsList')}}#first', //iframe的url
                    success:function () {
                        news = {}
                    },
                    end:function () {
                        if(news&&news.id!=undefined){
                            if(ids.indexOf(news.id)>-1){
                                layer.msg('该文章已存在',{'icon':2});

                            }else{
                                ids.push(news.id)
                                str = '';
                                str = '<li><a href="/wap/'+news.id+'/page" target="_blank">'+news.post_title+'</a>  <button class="layui-btn layui-btn-small cancle-news" type="button" onclick="cancleNews('+news.id+');$(this).parent().remove()"> <i class="layui-icon">&#xe640;</i> </button></li>';
                                $('#step2container').append(str);
                                $('#step2time').addClass('step_done');
                                $('[name=ids]').val(ids.join(','));
                            }

                        }
                    }
                });
            })
            form.on('submit(*)',function(data){
                return false;
            });
            //一些事件监听
            element.on('tab(posts)', function(data){
            });
            @if (count($errors) > 0)
                @foreach ($errors->all() as $error)
                    layer.msg('{{$error}}',{'icon':2});
                    @break
                @endforeach
            @endif

        });
    </script>
@endsection